<template>
  <div>

<!--    <van-sticky>-->
<!--      <van-dropdown-menu>-->
<!--        <van-dropdown-item v-model="value1" :options="option1" />-->
<!--        <van-dropdown-item v-model="value2" :options="option2" />-->
<!--      </van-dropdown-menu>-->
<!--    </van-sticky>-->

    <div style="padding: 0.5rem 0rem 0rem 0rem"></div>
    <div class="wrapper">
      <div
        class="material-list-grid"
        v-for="(list,index) in productCategory"
      >

        <van-image
          round
          style="border-radius:10px;"
          width="10rem"
          height="10rem"
          fit="cover"
          :src="list.vrShouyeUrl"
          @click="toDetails(list.vrId)"
        />
        <div class="material-list-grid-content">
          <div
            align="left"
            style="border-radius: 0.5rem;box-shadow:0 8px 12px #ebedf0"
          >


            <div>
              <!--<span style="font-size: 5px;margin: 0rem 0.5rem 0rem 0.5rem">{{list.strategyHabitable}}居&nbsp;|&nbsp;{{list.price}}万&nbsp;|&nbsp;{{list.strategyStyle}}</span>-->
            </div>
            <div style="margin-top: 0.5rem">
              <p style="width: 9rem;font-size: 13px;font-weight:550;margin: 0rem 0.5rem 0rem 0.5rem">{{list.vrZhuti}}</p>
            </div>
            <div>
            <van-image
              style="float: left;margin-top: 0.25rem;margin-left: 0.5rem"
              round
              width="1rem"
              height="1rem"
              fit="cover"
              :src="list.supplierPic"
            />
            <p style="margin:5px 0;padding: 0;height: 1.5rem;line-height: 1.55rem">{{list.shopsName}}</p>

<!--              <template>-->
<!--                <a href="https://vr.om.cn/view/95933" target="_blank" rel="noopener" >aa </a>-->
<!--              </template>-->
            </div>
          </div>
        </div>



      </div>
    </div>

  </div>
</template>

<script>
  import { findAllSand } from "@/api/commodity/strategy";
  import { findAllSandById } from "@/api/commodity/strategy";
  export default {
        name: "strategy_sand",
      data(){
          return{
            showne:false,
            listAll:'',
            value1: 0,
            value2: 'a',
            option1: [
              { text: '全部商品', value: 0 },
              { text: '新款商品', value: 1 },
              { text: '活动商品', value: 2 },
            ],
            option2: [
              { text: '默认排序', value: 'a' },
              { text: '好评排序', value: 'b' },
              { text: '销量排序', value: 'c' },
            ],

            productCategory:[],

          }
      },
    created() {
      this.getList();
    },

    methods:{
      getList(){
        findAllSand().then(res=>{
          this.productCategory = res.data

        })
      },
      toDetails(list){
        // this.showne = true
        // findAllSandById(list).then(res=>{
        //   this.listAll = res.data.data.vrUrl
        //   this.lujing = res.data.data.vrShouyeUrl
        //   this.zhuti = res.data.data.vrZhuti
        //   console.log("***this.listAll***"+this.listAll)
        // })
        this.$router.push({ path:'/vr',query:{vrId:list}})
      }
    }


  }
</script>

<style scoped>
  .sousuo{
    margin: 0.5em 0px 0px 0px;
    border-radius: 15px;
  }

  .banner_wrapper {
    width: 100%;
    height: 40vw;
    overflow: hidden;
  }
  .banner_wrapper img {
    transform: translateY(-15%);
  }
  .index_list {
    padding-bottom: 60px;
    height: calc(100*10);
  }
  .main{
    padding: 0vw 4vw;
  }


  .search_bar {
    display: flex;
    height: 10.133vw;
    width: 100%;
    margin-top: 1.867vw;
    line-height: 10.133vw;
    font-size: 3.733vw;
    background-color: #ffffff;
    border-radius: 13.333vw;
    box-shadow: 0.533vw 0.533vw 1.333vw rgb(219, 219, 219);
    padding: 0px 19.999px;
    box-sizing: border-box;
  }
  .hot_key {
    color: #000000;
  }
  .search_icon {
    line-height: 10.133vw;
    font-size: 4.8vw;
    margin-right: 2.667vw;
    color: #999999;
  }
  .content {
    padding: 0.16rem 0.16rem 1.6rem;
  }
  .index_header {
    height: 14.4vw;
    background-color: #ffffff;
    box-sizing: border-box;
    width: 100%;
    padding: 0px 4vw;
  }
  .area {
    height: 14.4vw;
    line-height: 14.4vw;
    color: #777777;
    width: 100%;
  }


  .shop-name {
    font-size: 12px;
    padding-bottom: 5px;
    text-align: left;
  }

  .van-tag {
    padding-left: 5px;
    padding-right: 5px;
  }

  .zx-box {
    display: flex;
    align-items: center;
  }

  .index_item {
    margin-top: 5.333vw;
    margin-bottom: 8vw;
  }
  .wrapper {
    display: inline-block;

  }

  .info1 {
    display: flex;
    margin-top: 2.2vw;
  }
  .info1 p {
    font-size: 3.733vw;
    height: 4.4vw;
    line-height: 4.4vw;
    margin-right: 1.6vw;
    color: #777777;
  }
  .info1 .distance {
    font-size: 3.2vw;
    color: #000;
  }
  .info1 .i {
    font-size: 4.4vw;
  }
  .title {
    margin: 2.2vw 0vw;
    color: #333;
  }
  .content {
    text-align: left;
  }

  .material-list-grid {
    display: inline-block;
    padding: 0.13rem;
    margin-bottom: 5vw;
    border-bottom: 1px solid #eeeeee;
    padding-bottom: 5vw;
  }
  .material-list-grid P,
  span {
    font-size: 0.5rem;
    padding: 0.1rem 0;
  }
</style>
